<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@page import="model.Gebruiker;"%>
<head>
<title>Auction</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<link href="css/reset.css" rel="stylesheet" type="text/css" />
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>

<!-- begin body -->
<body>


	<!-- begin logo -->
	<div id="logo">
		<img class="logoimg" src="images/logo.png" alt="logo" />
	</div>
	<!-- end logo -->

	<!-- begin main -->
	<div class="main">

		<!-- begin auctionwrap -->
		<div class="auctionwrap">


			<%
				Gebruiker gebruiker = (Gebruiker) session.getAttribute("gebruiker");
				pageContext.setAttribute("gebruiker", gebruiker);
			%>

			<c:choose>
				<c:when test="${gebruiker!=null}">
					<div class="menu">
						<ul id="menuItems">
							<li><a href="./VeilingController">Home</a></li>
							<li><a href="./VeilingController?action=myAuctions">My
									Auctions</a></li>
							<li><a href="./VeilingController?action=myBids">My Bids</a>
							</li>
							<li><a href="./EditProfileController">Edit profile</a></li>
							<li><a href="./InlogController?action=logout">Logout</a></li>

						</ul>
						<ul id="ingelogd"> <li> Logged in as: <b>
						<c:out value="${gebruiker.voornaam}"></c:out> <c:out value="${gebruiker.achternaam}"> </c:out></b>
						</li></ul>
					</div>
				</c:when>

				<c:otherwise>
					<div class="menu">
						<ul id="menuItems">
							<li><a href="./VeilingController">Home</a></li>
							<li><a href="./VeilingController?action=login">Login</a></li>
							<li><a href="./VeilingController?action=register">Register</a>
							</li>
						</ul>
					</div>
				</c:otherwise>
			</c:choose>


			<div class="auctionsfullpage">
				<!-- begin auctionbeschrijving-->
				<div id="auctionbeschrijving">

					<div id="tijd">

						<c:set var="verkoper" value="${veiling.verkoper}"></c:set>

						<!-- 					alleen zichtbaar als de ingelogde persoon de eigenaar is van de veiling -->
						<c:if test="${gebruiker.id==verkoper.id}">
							<div id="buttons">
								<a id="editButton"
									href="./editController?action=delete&veilingid=${veiling.id}"
									class="button"> <span>Delete</span> </a>
							<c:choose>
							<c:when test="${veiling.prijs ==veiling.highestBidDouble}">
							<a id="editButton" href="./editController?veilingid=${veiling.id}" class="button"><span>Edit</span></a>
							</c:when>
							<c:otherwise>
							<span id="editButton" class="inactiveButton"> <span>Edit</span> </span>
							</c:otherwise>
							</c:choose> 
							</div>
						</c:if>



						<h6>
							<c:out value="${veiling.titel}">
							</c:out>
						</h6>

						<span class="date"> verkoper <c:out
								value="${verkoper.voornaam}">
							</c:out> <c:out value="${verkoper.achternaam}">
							</c:out> | 
							<c:choose>
								<c:when test="${veiling.expired}">
									<b>verlopen</b>
								</c:when>
								<c:otherwise>
									<a id="timeremaining" href=#> <c:out value="${veiling.remaining}"></c:out></a>
						 <br> </c:otherwise> </c:choose></span>
					</div>

					<p id="omschrijving">
						<c:out value="${veiling.omschrijving}"></c:out>
					</p>
				</div>
				<!-- end auctionbeschrijving-->

				<!-- begin latestbids -->
				<div id="latestbids">
					<div id="imagelatestdiv">
						<img class="auctionimgfullauction" src="${veiling.foto}" />
					</div>

					<div id="latestbidslist">
						<h6>latest bids</h6>
						<ul id="naam">

							<c:choose>
								<c:when test="${empty biedingen}">
									<li>Minimum price:</li>
								</c:when>
								<c:otherwise>
									<c:forEach var="bod" items="${biedingen}" varStatus="status">
										<c:set var="bieder" value="${bod.bieder}">
										</c:set>
										<c:if test="${status.count == 1}">
											<b><li>Name</li></b>
										</c:if>
										<c:if test="${status.count <= 5}">
											<li><c:out value="${bieder.voornaam}">
												</c:out></li>
										</c:if>
									</c:forEach>

								</c:otherwise>
							</c:choose>

						

						</ul>
						<ul id="prijs">
							<c:choose>
								<c:when test="${empty biedingen}">
									<li><c:out value="${veiling.highestBid}"></c:out></li>
								</c:when>
								<c:otherwise>
									<c:forEach var="bod" items="${biedingen}" varStatus="status">
									<c:if test="${status.count == 1}">
											<b><li>Price</li></b>
										</c:if>
										<c:if test="${status.count <= 5}">
											<li><c:out value="${bod.prijs}"> € </c:out>
											</li>
										</c:if>
									</c:forEach>

								</c:otherwise>
							</c:choose>

						</ul>
						
						<ul id="datum">
							<c:choose>
								<c:when test="${empty biedingen}">
									<li></li>
								</c:when>
								<c:otherwise>
									<c:forEach var="bod" items="${biedingen}" varStatus="status">
									<c:if test="${status.count == 1}">
											<b><li>Date</li></b>
										</c:if>
										<c:if test="${status.count <= 5}">
											<li><c:out value="${bod.datum}"></c:out>
											</li>
										</c:if>
									</c:forEach>

								</c:otherwise>
							</c:choose>

						</ul>
						
						
					</div>


					<!-- je mag alleen bieden als je bent ingelogd, niet de verkoper bent en de veiling niet verlopen is -->
					<c:if
						test="${gebruiker!=null && veiling.expired == false && verkoper.id != gebruiker.id}">

						<div id="bidauction">

							<form id="BidForm"
								action="./BidController?veilingid=${veiling.id}&gebruikerid=${gebruiker.id}"
								method="post">
								<input id="bidamount" name="bidamount" type="text" maxlength="7"></input>
								<button class="button" id="bid" type="submit">Bid</button>
							</form>
						</div>
					</c:if>


				</div>
				<!-- end latestbidslist -->
			</div>
			<!-- end latestbids -->


		</div>
		<!-- end auctions-->

	</div>
	<!-- end auctionwrap -->
	</div>
	<!-- end main -->




<!-- // end body -->

<script src="Js/jquery-1.6.4.min.js"></script>
<script type="text/javascript">

	$(document).ready(
						setInterval("getRemaining()",1000),
						setInterval("getBids()", 10000)
	);
	
	
	function getRemaining() {
		$
				.ajax({
					url : "./refreshAuctions?action=getRemaining",
					type : "GET",
					data : {
						veilingid : "${veiling.id}"
					},
					dataType: "text",
					caching: false,
					error : function() {
					},
					success : function(data) {
						$('a#timeremaining').empty().text(data);
					}
				});
	}
	
	function getBids() {
		$
				.ajax({
					url : "./refreshBids?action=getRemaining",
					type : "GET",
					data : {
						veilingid : "${veiling.id}"
					},
					dataType: "html",
					caching: false,
					error : function() {
					},
					success : function(data) {
						$('#latestbidslist').empty().html(data);
					}
				});
	}
</script>
</body>

</html>
